<!--  -->
<template>
  <div id="container">
    <div ref="chart" id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  components: {},
  data() {
    return {
      chart: null
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    chartData: {
      handler(newVal) {
        if (newVal && this.chart) {
          //   console.log("this.chartData", this.chartData)
          this.drawChart()
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {},
  created() {
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.chart);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  mounted() {
    if (!this.chart) {
      this.chart = echarts.init(this.$refs.chart)
      window.addEventListener('resize', this.handleResize);
    }
    // this.drawChart()
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    drawChart() {
      var myChart = this.chart

      const chartData = this.chartData
      const seriesData = chartData.list

      var zq_data = seriesData.map(item => [item.di, item.zb])
      var yMin = Math.floor(Math.min(...seriesData.map(item => item.zb)))
      var yMax = Math.ceil(Math.max(...seriesData.map(item => item.zb)))
      var xMin = Math.floor(Math.min(...seriesData.map(item => item.di)))
      var xMax = Math.ceil(Math.max(...seriesData.map(item => item.di)))

      yMin == Infinity && (yMin = null)
      yMax == -Infinity && (yMax = null)
      xMin == Infinity && (xMin = null)
      xMax == -Infinity && (xMax = null)
      const zData = [[xMin, chartData.z], [xMax, chartData.z]]

      var option = {
        legend: {
          data: ['警戒水位', '保证水位'],
          left: 'center',  // 或者使用 '50%'
          top: 'top',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            const param = params[0];
            return `
                         <div>
                          <p>起点距：${param.value[0]} m</p>
                          <p>河道高程：${param.value[1]} m³/s</p>
                        </div>
                    `;
          },
          // 直接设置宽度和高度
          width: 140,
          height: 80,
          // 或者通过 padding 调整
          padding: [0, 10],
          // 调整文本样式
          textStyle: {
            fontSize: 12,
            lineHeight: 14
          }
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            // name: '起点距(m)',
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#B2B8C3'
            },
            axisLine: {
              onZero: true,
              lineStyle: {
                color: '#B2B8C3'
              }
            },
          }
        ],
        yAxis: [
          {
            name: '河底高程(m)',
            type: 'value',
            axisLabel: {
              color: '#B2B8C3'
            },
            axisLine: {
              lineStyle: {
                color: '#B2B8C3'
              }
            },
            axisTick: {
              show: false // 隐藏刻度线
            },
            splitLine: {  // y轴网格线
              show: true,
              lineStyle: {
                type: 'dashed',    // 虚线类型
                color: '#666666',  // 线条颜色
                width: 0.5,          // 线条宽度
                dashOffset: 2      // 虚线偏移量
              }
            },
            axisLabel: {
              show: true,
              // textStyle: {
              //   color: '#fff'
              // },
              margin: 13  // 减小标签与轴的距离
            },
            min: yMin,
            max: yMax
          },
        ],
        series: [
          {
            name: '',
            type: 'line',
            data: zq_data,
            smooth: true, // 关键属性：设为 true 开启平滑曲线
            // tooltip: {
            //   show: false
            // },
            showSymbol: false,
            areaStyle: {
              opacity: 3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(228, 202, 160)'
                },
                {
                  offset: 1,
                  color: 'rgb(197, 173, 76)'
                }
              ])
            },
            lineStyle: {
              width: 0
            },
            z: 2
          },
          {
            name: 'rz',
            type: 'line',
            data: zData,
            tooltip: {
              show: false
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.9,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(47, 109, 200)'
                },
                {
                  offset: 1,
                  color: 'rgb(86, 169, 251)'
                }
              ])
            },
            lineStyle: {
              width: 0
            },
            z: 1
          },
          {
            name: '警戒水位',
            type: 'line',
            markLine: this.getMarkLine('警戒水位', chartData.wrz)
          },
          {
            name: '保证水位',
            type: 'line',
            markLine: this.getMarkLine('保证水位', chartData.grz)
          }
        ]
      };

      myChart.setOption(option);

    },
    // 修改 markLine 的显示逻辑
    getMarkLine(name, value) {
      if (value === null || value == undefined) return {};  // 如果值为null，返回空对象
      return {
        label: {
          formatter: `${name}: ${value}m`,
          position: 'middle',
          color: this.getLineColor(name)
        },
        data: [{
          yAxis: value,
          lineStyle: {
            type: 'dashed',
            color: this.getLineColor(name)  // 获取对应的颜色
          }
        }]
      };
    },

    // 获取线条颜色
    getLineColor(name) {
      const colorMap = {
        '警戒水位': '#c23531',
        '保证水位': '#00F0FF'
      };
      return colorMap[name] || '#000000';
    }

  },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式
#container {
  position: relative;
  /* 添加相对定位 */
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

#main {
  width: 100%;
  height: 100%;
}
</style>